<template>
  <div class="preview">
    <el-dialog
      v-dialogDrag
      title="遥调"
      :visible.sync="YtDialogVisible"
      width="300px"
      @close="YtMsgDialogClose"
      :close-on-click-modal="false"
      center
    >
      <el-form :model="Ytform" size="mini" ref="YtMsgForm" :rules="rules">
        <el-form-item label="目标" label-width="70px" prop="name">
          <el-input
            style="width: 100%"
            v-model="Ytform.name"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="遥调值" label-width="70px" prop="ctrl_value">
          <el-select
            v-model="Ytform.ctrl_value"
            placeholder="请选择"
            v-if="OptionSelect"
            style="width: 100%"
            @change="selectChange"
          >
            <el-option
              v-for="item in OptionSelectList"
              :key="item.value"
              :label="item.caption"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            v-else
            type="number"
            style="width: 100%"
            v-model="Ytform.ctrl_value"
            :min="minValue"
            :max="maxValue"
            @input="handleInput"
            placeholder="请输入遥调值"
            autofocus
          ></el-input>
        </el-form-item>
        <el-form-item label="超时(秒)" label-width="70px" prop="ctrl_timeout">
          <el-input
            type="number"
            style="width: 100%"
            v-model="Ytform.ctrl_timeout"
          ></el-input>
        </el-form-item>
        <el-form-item label="控制密码" label-width="70px" prop="ctrl_pwd">
          <el-input
            show-password
            style="width: 100%"
            v-model="Ytform.ctrl_pwd"
          ></el-input>
        </el-form-item>
        <el-form-item class="dialog-footer">
          <el-button
            size="mini"
            :disabled="YTbuttonDisabled"
            round
            type="success"
            @click="doYT(2)"
            >执行</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  setMessageCallback,
  removeMessageCallback,
  getGuid32,
  publishMsg,
  checkSpecialId,
} from "@/mqtt";
import "@/utils/dialog";
export default {
  name: "YTdialog",
  data() {
    return {
      YtDialogVisible: false, //遥调弹窗
      Ytform: {
        name: "",
        ctrl_value: "",
        ctrl_timeout: 10,
        ctrl_pwd: "",
      },
      YtMsgFrom: {
        id: "",
        gw_sn: "",
        ctrl_id: "",
        ctrl_uuid: "",
        ctrl_type: 1,
      },
      buttonDisabled: true,
      YTbuttonDisabled: false,
      uuid: "",
      mySpecialId: "",
      minValue: "",
      maxValue: "",
      OptionSelect: false,
      OptionSelectList: [],
      rules: {
        ctrl_value: [
          { required: true, message: "必填", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              // console.log(this.minValue, this.maxValue);

              const minValueDefined = typeof this.minValue !== "undefined";
              const maxValueDefined = typeof this.maxValue !== "undefined";

              if (minValueDefined && value < this.minValue) {
                this.YTbuttonDisabled = true;
                return callback(new Error(`最小值为${this.minValue}`));
              }

              if (maxValueDefined && value > this.maxValue) {
                this.YTbuttonDisabled = true;
                return callback(new Error(`最大值为${this.maxValue}`));
              }

              this.YTbuttonDisabled = false;
              callback();
            },
            trigger: "blur",
            
          },
        ],
      },
    };
  },
  created() {},
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
  mounted() {
    setMessageCallback(this.onMessage);
  },

  methods: {
    onMessage(topic, msg) {
      //console.log(topic, msg);
      switch (msg.webMsgType) {
        case 1013:
          {
            switch (msg.funCode) {
              case 2:
                if (checkSpecialId(msg)) {
                  if (msg.retCode != 0) {
                    this.$message.error(msg.retMsg);
                    this.YTbuttonDisabled = false;
                  } else {
                    this.uuid = this.YtMsgFrom.ctrl_uuid;
                    if (this.uuid == msg.data.ctrl_uuid) {
                      switch (msg.data.ctrl_step) {
                        case 2:
                          this.$message.success("执行操作已执行!");
                          this.YTbuttonDisabled = false;
                          this.YtDialogVisible = false;
                          break;
                      }
                    }
                  }
                }
                break;
            }
          }
          break;
        default:
          break;
      }
    },
    Ytdialog(val) {
      this.YtDialogVisible = true;
      this.Ytform.name = val.name;
      this.YtMsgFrom.id = val.id;
      this.YtMsgFrom.gw_sn = val.gw_sn;
      this.YtMsgFrom.ctrl_id = val.id;
      this.YtMsgFrom.ctrl_uuid = getGuid32();
      this.minValue = val.min;
      this.maxValue = val.max;
      this.YTbuttonDisabled = true;
      if (val.hasOwnProperty("enum") && val.enum.length > 0) {
        this.OptionSelect = true;
        this.OptionSelectList = val.enum;
      }else{
        this.OptionSelect = false
        this.OptionSelectList = []
      }
    },

    doYT(val) {
      this.$refs.YtMsgForm.validate((valid) => {
        console.log(valid);
        if (valid) {
          let newMsg = {
            webMsgType: 1013,
            funCode: 2,
          };
          let obj = {
            ctrl_step: val,
            ctrl_value: Number(this.Ytform.ctrl_value),
            ctrl_timeout: parseInt(this.Ytform.ctrl_timeout),
            ctrl_pwd: this.Ytform.ctrl_pwd,
          };
          newMsg.data = { ...obj, ...this.YtMsgFrom };
          // console.log(newMsg);
          publishMsg(newMsg);
          this.YTbuttonDisabled = true;
          this.$message.success("遥调信息已下发，等待返回~~~");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    YtMsgDialogClose() {
      this.$refs.YtMsgForm.resetFields();
      this.buttonDisabled = true;
    },
    selectChange() {
      this.YTbuttonDisabled = false;
    },
    handleInput(val) {
      // console.log("遥调", val);
      // console.log(this.minValue, this.maxValue);
      // if (val < this.minValue) {
      //   this.Ytform.ctrl_value = this.minValue;
      //   return this.$message.warning(`最小值为${this.minValue}`);
      // } else if (val > this.maxValue) {
      //   this.Ytform.ctrl_value = this.maxValue;
      //   return this.$message.warning(`最大值为${this.maxValue}`);
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .dialog-footer .el-form-item__content {
  display: flex;
  justify-content: center;
}
</style>
